<template>
  <view class="persist-test">
    <!-- 标题 -->
    <view class="title">Pinia 持久化测试</view>

    <!-- 数据展示区 -->
    <view class="info-card">
      <view class="info-item">
        <text class="label">用户名：</text>
        <text class="value">{{ userStore.name }}</text>
      </view>
      <view class="info-item">
        <text class="label">Token：</text>
        <text class="value">{{ userStore.token }}</text>
      </view>
    </view>

    <!-- 操作按钮区 -->
    <view class="btn-group">
      <button type="primary" @click="updateName">更新用户名</button>
      <button type="primary" @click="updateToken">更新 Token</button>
      <button type="warn" @click="clearData">清空数据</button>
      <button type="warn" @click="getData">测试接口</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/modules/userStore"; // 导入你的 Pinia Store
import { http } from "/src/utils/http.ts";
const userStore = useUserStore(); // 实例化 Store

const getData = async () => {
  const res = await http<string[]>({
    method: "GET",
    url: "/home/banner",
  });
  console.log(res);
};

// 【操作 1】更新用户名（触发 Store 变更 + 持久化）
const updateName = () => {
  const newName = `用户_${Date.now() % 1000}`;
  userStore.setName(newName); // 调用 Store 中定义的 setName 方法
  uni.showToast({ title: "用户名已更新", icon: "success" });
};
// 【操作 2】更新 Token（触发 Store 变更 + 持久化）
const updateToken = () => {
  const newToken = `token_${Math.random().toString(36).slice(2, 8)}`;
  userStore.setToken(newToken); // 调用 Store 中定义的 setToken 方法
  uni.showToast({ title: "Token 已更新", icon: "success" });
};
// 【操作 3】清空数据（触发 Store 重置 + 持久化清除）
const clearData = () => {
  userStore.clearDate();

  uni.showToast({ title: "数据已清空", icon: "success" });
};
</script>

<style scoped>
.persist-test {
  padding: 30rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}
.info-card {
  background: #f7f7f7;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 40rpx;
}
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.label {
  width: 120rpx;
  color: #666;
}
.value {
  flex: 1;
  color: #333;
}
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
button {
  margin: 0 !important;
}
</style>
